<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.org/ui"
                template="../templates/ui.xhtml">

    <ui:define name="content">
        <h1 class="title ui-widget-header ui-corner-all">AJAX - DataTable</h1>
        <div class="entry">
           	<p>In this example, datatable is updated with ajax.</p>

            <h:form>

                <p:growl showDetail="true" />

                <p:panel header="New Book">
                    <h:panelGrid columns="2">
                        <h:outputLabel value="Title :" for="txt_title"></h:outputLabel>
                        <p:inputText id="txt_title" value="#{createBookBean.book.title}" required="true" label="Title"/>

                        <h:outputLabel value="Author :" for="txt_author"></h:outputLabel>
                        <p:inputText id="txt_author" value="#{createBookBean.book.author}" required="true" label="Author"/>
                    </h:panelGrid>
                </p:panel>

                <p:commandButton value="Add" action="#{createBookBean.createNew}" update="@form" style="margin:10px 0"/>

                <p:dataTable value="#{createBookBean.books}" var="book">

                    <p:column>
                        <f:facet name="header">
                            <h:outputText value="Title" />
                        </f:facet>
                        <h:outputText value="#{book.title}" />
                    </p:column>

                    <p:column>
                        <f:facet name="header">
                            <h:outputText value="Author" />
                        </f:facet>
                        <h:outputText value="#{book.author}" />
                    </p:column>

                </p:dataTable>
            </h:form>

            <h3>Source</h3>
            <p:tabView>
                <p:tab title="pprDataTable.xhtml">
                    <pre name="code" class="xml">
&lt;h:form&gt;

    &lt;p:growl showDetail="true" /&gt;

    &lt;p:panel header="New Book"&gt;
        &lt;h:panelGrid columns="2"&gt;
            &lt;h:outputLabel value="Title :" for="txt_title"&gt;&lt;/h:outputLabel&gt;
            &lt;p:inputText id="txt_title" value="\#{createBookBean.book.title}" required="true" label="Title"/&gt;

            &lt;h:outputLabel value="Author :" for="txt_author"&gt;&lt;/h:outputLabel&gt;
            &lt;p:inputText id="txt_author" value="\#{createBookBean.book.author}" required="true" label="Author"/&gt;
        &lt;/h:panelGrid&gt;
    &lt;/p:panel&gt;

    &lt;p:commandButton value="Add" action="\#{createBookBean.createNew}" update="@form" style="margin:10px 0"/&gt;

    &lt;p:dataTable value="\#{createBookBean.books}" var="book"&gt;

        &lt;p:column&gt;
            &lt;f:facet name="header"&gt;
                &lt;h:outputText value="Title" /&gt;
            &lt;/f:facet&gt;
            &lt;h:outputText value="\#{book.title}" /&gt;
        &lt;/p:column&gt;

        &lt;p:column&gt;
            &lt;f:facet name="header"&gt;
                &lt;h:outputText value="Author" /&gt;
            &lt;/f:facet&gt;
            &lt;h:outputText value="\#{book.author}" /&gt;
        &lt;/p:column&gt;

    &lt;/p:dataTable&gt;
&lt;/h:form&gt;
                    </pre>
                </p:tab>

                <p:tab title="CreateBookBean.java">
                    <pre name="code" class="java">
package org.primefaces.examples.view;

import java.util.ArrayList;
import java.util.List;

import javax.faces.application.FacesMessage;
import javax.faces.context.FacesContext;

import org.primefaces.examples.domain.Book;
import org.primefaces.examples.service.BookService;
import org.primefaces.examples.service.BookServiceImpl;

public class CreateBookBean {

	private Book book = new Book();

	private List&lt;Book&gt; books = new ArrayList&lt;Book&gt;();

	private BookService bookService = new BookServiceImpl();

	public void createNew() {
		if(books.contains(book)) {
			FacesMessage msg = new FacesMessage("Dublicated", "This book has already been added");
			FacesContext.getCurrentInstance().addMessage(null, msg);
		} else {
            books.add(book);
            bookService.saveBook(book);
            book = new Book();          //reset form
        }
	}

	public Book getBook() {
		return book;
	}

	public void setBook(Book book) {
		this.book = book;
	}

	public List&lt;Book&gt; getBooks() {
		return books;
	}
}

                    </pre>
                </p:tab>
            </p:tabView>

        </div>

    </ui:define>
</ui:composition>